<template>
  <li class="nav-cart" @mouseenter="showCarHandle" @mouseleave="hideCarHandle">
    <a href="javascript:;" class="ball-rect">购物车</a>
    <!--根据class改变颜色-->
    <span class="cart-empty-num" :class="{ 'cart-num': count > 0 }">
      <i>{{ count }}</i>
    </span>
    <div class="nav-cart-wrapper" v-if="carShow">
      <div class="nav-cart-list">
        <div class="empty" v-if="count <= 0">
          <h3>购物车为空</h3>
          <p>您还没有选购任何商品，现在前往商城选购吧!</p>
        </div>
        <div class="full" v-else>
          <div class="nav-cart-items">
            <ul>
              <li
                class="clear"
                v-for="(item,index) in carPanelData"
                :key="index"
              >
                <div class="cart-item js-cart-item cart-item-sell">
                  <div class="cart-item-inner">
                    <div class="item-thumb">
                      <img
                        :src="
                          item.ali_image +
                          '?x-oss-process=image/resize,w_80/quality,Q_100/format,webp'
                        "
                      />
                    </div>
                    <div class="item-desc">
                      <div class="cart-cell">
                        <h4>
                          <a href="#/item/100027401">{{ item.title }}</a>
                        </h4>
                        <p class="attrs">
                          <span>{{ item.spec_json.show_name }}</span>
                        </p>
                        <h6>
                          <span class="price-icon">¥</span
                          ><span class="price-num">{{ item.price }}</span
                          ><span class="item-num">x {{ item.count }}</span>
                        </h6>
                      </div>
                    </div>
                    <div
                      class="del-btn"
                      @click="delCarPanelHandle(item.sku_id)"
                    >
                      删除
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
          <div class="nav-cart-total">
            <p>
              共 <strong class="ng-binding">{{ count }}</strong> 件商品
            </p>
            <h5>
              合计：<span class="price-icon">¥</span>
              <span
                class="price-num ng-binding"
                ng-bind="cartMenu.totalPrice"
                >{{ totle }}</span
              >
            </h5>
            <h6>
               <router-link  class="nav-cart-btn" to="/cart">去购物车</router-link>
            </h6>
          </div>
        </div>
      </div>
    </div>
    <!--这里是在写小球组件-->
    <!--v-on是绑定事件  缩写是 @ -->
    <transition
      name="ball"
      v-on:before-enter="beforeEnter"
      v-on:enter="enter"
      v-on:after-enter="afterEnter"
      v-bind:css="true"
    >
    <!--用v-show判断小球是否显示-->
    <!--控制小球横向运动-->
      <div class="addcart-mask" v-show="ball.show">
        <img class="mask-item" />
      </div>
    </transition>
  </li>
</template>

<script>
export default {
  //利用computed来计算加入到购物车商品的总价，将其他数据套用进来
  computed: {
    carPanelData() {
      return this.$store.state.carPanelData;
    },
    //拿到所有被添加到购物车的商品
    count() {
      return this.$store.getters.totleCount;
    },
    //拿到所有被添加到购物车商品的总数
    totle() {
      return this.$store.getters.totlePrice;
    },
    carShow() {
      return this.$store.state.carShow;
    },
    ball() {
      return this.$store.state.ball;
    },
  },
  //用methods可以在组件中直接this.名字就可以直接拿取到数字，方便获取之前定义的组件
  methods: {
    delCarPanelHandle(id) {
      this.$store.commit("delCarPanelData", id);
    },
    //调用清空购物车组件
    showCarHandle() {
      this.$store.commit("showCar");
    },
    hideCarHandle() {
      this.$store.commit("hideCar");
    },
    
    //这里用let声明变量，和var类似
    beforeEnter(el) {
      let rect = this.ball.el.getBoundingClientRect();
      let rectEl = document
        .getElementsByClassName("ball-rect")[0]
        .getBoundingClientRect();
      let ball = document.getElementsByClassName("mask-item")[0];
      //计算按钮与购物车之间的差值
      let x = rectEl.left + 16 - (rect.left + rect.width / 2);
      let y = rect.top + rect.height / 2 - rectEl.top + 5 - 16;
      console.log(rect.top + rect.height / 2);
      //小球的位置
      el.style.transform = "translate3d(0," + y + "px,0)";

      ball.style.transform = "translate3d(-" + x + "px,0,0)";
      ball.src = this.ball.img;
      console.log(this.ball.img);
    },
    enter(el) {
      //浏览器自动渲染
      let rf = el.offsetHeight;
      this.$nextTick(() => {
        //小球回到零点
        el.style.transform = "translate3d(0,0,0)";
        document.getElementsByClassName("mask-item")[0].style.transform =
          "translate3d(0,0,0)";
      });
    },
    afterEnter(el) {
      this.ball.show = false;
    },
  },
};
</script>

<style>
.ball-enter-active {
  transition: 0.5s cubic-bezier(0.15, 0.69, 0.6, 1.29);
}
/*小球飞入的幅度 */
.ball-enter-active .mask-item {
  transition: 0.5s cubic-bezier(0, 0, 1, 1);
}
</style>